<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频切分工具</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h2 class="mb-0"><i class="bi bi-scissors"></i> 视频切分工具</h2>
                    </div>
                    <div class="card-body">
                        <!-- 文件上传区域 -->
                        <div class="upload-section mb-4">
                            <h5>1. 选择视频文件</h5>
                            <div class="upload-area" id="uploadArea">
                                <div class="upload-content">
                                    <i class="bi bi-cloud-upload upload-icon"></i>
                                    <p class="mb-2">拖拽视频文件到此处或点击选择</p>
                                    <p class="text-muted small">支持格式: MP4, AVI, MOV, MKV, WMV, FLV, WEBM</p>
                                    <input type="file" id="videoFile" accept="video/*" class="d-none">
                                    <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('videoFile').click()">
                                        <i class="bi bi-folder2-open"></i> 选择文件
                                    </button>
                                </div>
                            </div>
                            <div class="progress mt-3 d-none" id="uploadProgress">
                                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>

                        <!-- 视频信息显示区域 -->
                        <div class="video-info-section mb-4 d-none" id="videoInfoSection">
                            <h5>2. 视频信息</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="info-card">
                                        <strong>文件名:</strong> <span id="videoFileName"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-card">
                                        <strong>时长:</strong> <span id="videoDuration"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-card">
                                        <strong>分辨率:</strong> <span id="videoResolution"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-card">
                                        <strong>帧率:</strong> <span id="videoFps"></span> FPS
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 时间选择区域 -->
                        <div class="time-selection-section mb-4 d-none" id="timeSelectionSection">
                            <h5>3. 选择切分时间</h5>
                            <div class="time-controls">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">开始时间</label>
                                        <div class="input-group">
                                            <input type="range" class="form-range" id="startTimeSlider" min="0" max="100" value="0">
                                            <input type="text" class="form-control time-input" id="startTimeInput" placeholder="00:00:00" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">结束时间</label>
                                        <div class="input-group">
                                            <input type="range" class="form-range" id="endTimeSlider" min="0" max="100" value="100">
                                            <input type="text" class="form-control time-input" id="endTimeInput" placeholder="00:00:00" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="time-display">
                                    <div class="alert alert-info">
                                        <i class="bi bi-info-circle"></i>
                                        选择的片段长度: <strong id="segmentDuration">00:00:00</strong>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 切分操作区域 -->
                        <div class="split-section d-none" id="splitSection">
                            <h5>4. 开始切分</h5>
                            <div class="d-grid gap-2">
                                <button type="button" class="btn btn-success btn-lg" id="splitBtn">
                                    <i class="bi bi-scissors"></i> 开始切分视频
                                </button>
                            </div>
                            <div class="progress mt-3 d-none" id="splitProgress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%">
                                    正在处理中...
                                </div>
                            </div>
                        </div>

                        <!-- 结果显示区域 -->
                        <div class="result-section mt-4 d-none" id="resultSection">
                            <div class="alert alert-success">
                                <h5><i class="bi bi-check-circle"></i> 切分完成!</h5>
                                <p id="resultMessage"></p>
                                <button type="button" class="btn btn-primary" id="downloadBtn">
                                    <i class="bi bi-download"></i> 下载切分后的视频
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast 通知 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="toast" class="toast" role="alert">
            <div class="toast-header">
                <strong class="me-auto">提示</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body" id="toastBody">
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>